<template>
	<view class="box">
		<!-- 上面动态切换 -->
		<view class="title-view">
			<text :class="{buttonActive: switchBtnTab ===0}" @click="switchCurve(0)" class="iten">
				待评价
			</text>
			<text :class="{buttonActive: switchBtnTab ===1}" @click="switchCurve(1)" class="iten">
				已完成
			</text>
		</view>

		<!-- 下面滑块 -->
		<view>
			<view class="text" v-show="switchBtnTab == 0">
				<view v-for="item in swiper" :key="item">
					<view v-if="item.state == 1" class="item">
						<view class="commets_bt">{{item.name}}</view>
						<view class="commets_text_box">
							<image class="commets_img" src="../../static/images/ymy/A31/image_qcfw1.png"></image>
							<view class="commets_text">
								<text>{{item.text}}</text>
								<view class="commets_spm">共<text>1</text>件</view>
							</view>
							<view class="">
								<view><text>￥</text>158.00</view>
							</view>
						</view>
						<navigator url="/pages/sppjfq/sppjfq" class="commets_pj"><text class="commets_text_pj">评价</text></navigator>
					</view>
					<view v-if="item.state == 2" class="item">
						<view class="commets_bt">{{item.name}}</view>
						<view class="commets_text_box">
							<image class="commets_img" src="../../static/images/ymy/A31/image_qcfw1.png"></image>
							<view class="commets_text">
								<text>{{item.text}}</text>
								<view class="commets_spm">共<text>1</text>件</view>
							</view>
							<view class="">
								<view><text>￥</text>158.00</view>
							</view>
						</view>
						<navigator url="/pages/serviceEvaluation/serviceEvaluation" class="commets_pj"><text class="commets_text_pj">评价</text></navigator>
					</view>
				</view>
			</view>
			<view class="text" v-show="switchBtnTab == 1" >
				<view v-for="item in swiper" :key="item">
					<view class="item">
						<view class="commets_bt">{{item.name}}</view>
						<view class="commets_text_box">
							<image class="commets_img" src="../../static/images/ymy/A31/image_qcfw1.png"></image>
							<view class="commets_text">
								<text>{{item.text}}</text>
								<view class="commets_spm">共<text>1</text>件</view>
							</view>
							<view class="">
								<view><text>￥</text>158.00</view>
							</view>
						</view>
						<navigator class="commets_pj"><text class="commets_text_pj">评价</text></navigator>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				switchBtnTab: 0,
				currentIndex: 0,
				list: ["待评价", "已完成"],
				swiper: [{
						name: '蜗牛官方工场店',
						text: '保养服务洗车组合套餐阿杀菌剂啊啊',
						state: 1
					},
					{
						name: '蜗牛官方服务',
						text: '保养服务洗车组合套餐阿杀菌剂啊啊',
						state: 2
					}
				]
			}
		},
		methods: {
			switchCurve(index) {
				this.switchBtnTab = index
			},
		}
	}
</script>

<style>
	.iten {
		height: 44rpx;
		font-family: PingFang SC;
		font-size: 32rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 11rpx;
		letter-spacing: 0rpx;
		color: #4a4a4a;
		padding: 36rpx 0;
	}

	.item {
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
	}

	.buttonActive {
		border-bottom: 4rpx solid #f5610c;
		border-radius: 4rpx;
	}

	.commets_swiper {
		background-color: #FFFFFF;
		height: 100vh;
	}

	.commets_bt {
		margin: 20rpx 0 0 30rpx;
	}

	.commets_img {
		width: 120rpx;
		height: 120rpx;
		background-color: #000000;
	}

	.commets_text_box {
		display: flex;
		margin: 30rpx 30rpx 10rpx 30rpx;
	}

	.commets_text {
		line-height: 30rpx;
		margin: 0 30rpx;
	}

	.commets_spm {
		margin-top: 30rpx;
		font-family: PingFang SC;
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 28rpx;
		letter-spacing: 0rpx;
	}

	.title-view {
		display: flex;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
		justify-content: space-evenly;
	}

	.text-view {
		flex-grow: 1;
		line-height: 80rpx;
		text-align: center;
	}

	.active {
		border-bottom: 5rpx solid #5992BD;
	}

	.commets_pj {
		height: 45rpx;
		text-align: right;
		margin-right: 30rpx;
		line-height: 45rpx;
	}

	.commets_text_pj {
		width: 140rpx;
		height: 48rpx;
		padding: 5rpx 35rpx;
		line-height: 40rpx;
		color: #f5610c;
		border: 1rpx solid #f5610c;
		border-radius: 24rpx;
		font-family: PingFang SC;
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 28rpx;
		letter-spacing: 0rpx;
	}
</style>
